/* 弹窗 */
$modal-zindex: $zindex-higher !default; // 图层等级
$modal-default-width: 400px !default; // 弹窗默认宽度
$modal-mw: map-get($media-breakpoints, pc) !default; // 弹窗最大宽度
$modal-size-tiny: 320px !default; // 超小弹窗宽度
$modal-size-small: 480px !default; // 小弹窗宽度
$modal-size-medium: 640px !default; // 中弹窗宽度
$modal-size-large: 800px !default; // 大弹窗宽度
$modal-size-huge: 960px !default; // 超大弹窗宽度
$modal-mask-bg: $color-bg-mask !default; // 弹窗摭盖层背景
$modal-border-radius: $border-radius !default; // 弹窗圆角
$modal-px: $spacing-small !default; // 弹窗内边距
$modal-header-height: 40px !default; // 标题高度
$modal-header-font-size: $font-size-medium !default; // 标题字号
$modal-header-color: #fff !default; // 标题文本色
$modal-header-bg: $color-main !default; // 标题背景
$modal-header-border-color: $color-border-secondary !default; // 标题边框色
$modal-header-close-color: #fff !default; // 关闭按钮颜色
$modal-header-color-weaking: #333 !default; // 弱化标题文本色
$modal-header-bg-weaking: #fff !default; // 弱化标题背景
$modal-header-close-color-xweaking: #95a5b6 !default; // 弱化标题关闭按钮颜色
$modal-body-mh: 520px !default; // 内容区最大高度
$modal-footer-pt: $spacing-tiny !default; // 底部上边距
$modal-footer-pb: $spacing-medium !default; // 底部下边距
$modal-footer-bg: #fff !default; // 底部背景

// 弹窗:容器
.tw-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $modal-zindex;
  display: none;
  text-align: center;
  background-color: $modal-mask-bg;
  @include center-y;
}

.tw-modal.xopen {
  display: block;
}

.tw-modal.xnomask {
  background-color: transparent;
}

// 弹窗:窗体
.tw-modal-window {
  position: relative;
  display: inline-block;
  width: $modal-default-width;
  max-width: $modal-mw;
  text-align: left;
  white-space: normal;
  vertical-align: middle;
}

// 弹窗:窗体-超小
.tw-modal.xtiny > .tw-modal-window {
  width: $modal-size-tiny;
}

// 弹窗:窗体-小
.tw-modal.xsmall > .tw-modal-window {
  width: $modal-size-small;
}

// 弹窗:窗体-小
.tw-modal.xsmaller > .tw-modal-window {
  width: 520px;
}

// 弹窗:窗体-中
.tw-modal.xmedium > .tw-modal-window {
  width: $modal-size-medium;
}

// 弹窗:窗体-超大
.tw-modal.xlg > .tw-modal-window {
  width: $modal-size-large;
}

// 弹窗:窗体-超大
.tw-modal.xhuge > .tw-modal-window {
  width: $modal-size-huge;
}

// 弹窗:窗体-头部
.tw-modal-window-header {
  position: relative;
  height: $modal-header-height;
  line-height: $modal-header-height;
  padding: 0 $modal-px;
  font-size: $modal-header-font-size;
  color: $modal-header-color;
  cursor: move;
  background-color: $modal-header-bg;
  border-top-left-radius: $modal-border-radius;
  border-top-right-radius: $modal-border-radius;
}

.tw-modal-window-header.xnodrag {
  cursor: default;
}

.tw-modal-window-header > h4 {
  padding-right: $modal-header-height;
  font-weight: 400;
  @include ellipsis;
}

.tw-modal-window-header.xweaking {
  color: $modal-header-color-weaking;
  background-color: $modal-header-bg-weaking;
  border-bottom: 1px solid $modal-header-border-color;
}

.tw-modal-window-colose {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  line-height: $modal-header-height - 2px;
  padding: 0 $modal-px / 2 0 $modal-px;
  font-size: 2em;
  font-weight: 300;
  text-align: center;
  opacity: .85;
}

.tw-modal-window-colose:hover {
  opacity: 1;
}

.tw-modal-window-header.xweaking > .tw-modal-window-colose {
  color: $modal-header-close-color-xweaking;
  &:hover{
    color: $color-main;
  }
}

// 弹窗:窗体-主体
.tw-modal-window-body {
  max-height: $modal-body-mh;
  padding: $spacing-medium;
  padding-bottom: 0;
  overflow-y: auto;
  background: #fff;
}
// 弹窗:窗体-主体大间距
.tw-modal.xmessage .tw-modal-window-body {
  padding: $spacing-huge $spacing-large;
}

.tw-modal.xlh .tw-modal-window-body {
  height: 560px;
  max-height: 560px;
}

// 弹窗:窗体-主体-无内边距
.tw-modal.xnopd .tw-modal-window-body {
  padding: 0;
}

// 弹窗:窗体-底部
.tw-modal-window-footer {
  padding: $modal-footer-pt 0 $modal-footer-pb;
  text-align: center;
  background-color: $modal-footer-bg;
  border-bottom-right-radius: $modal-border-radius;
  border-bottom-left-radius: $modal-border-radius;
}

.tw-modal-window-footer .tw-btn + .tw-btn {
  margin-left: $spacing-tiny;
}

// 锁定body滚动条
body.xscrolllocked {
  overflow: hidden;
}
